<template>
  <div class="drag-image-props">
    <a-row :gutter="12">
      <a-col :md="24" :sm="24">
        <image-item :title.sync="iTitle" :img-src.sync="imgSrc" />
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :md="24" :sm="24">
        <radio-selection label="图片样式" :selected.sync="iImgStyle" :options="styleOptions" />
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :md="24" :sm="24">
        <radio-selection label="图片倒角" :selected.sync="iBorderRadius" :options="radiusOptions" />
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :md="24" :sm="24">
        <slider label="页面边距" :min="0" :max="30" :value.sync="iPagePadding" />
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :md="24" :sm="24">
        <slider label="图片间距" :min="0" :max="30" :value.sync="iImgMargin" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { ImageItem, RadioSelection, Slider } from './other'
  export default {
    name: 'DraggableImageProps',
    props: {
      // 点击时链接地址
      link: {
        type: String,
        default: ''
      },
      // 图片地址
      src: {
        type: String,
        default: ''
      },
      title: {
        type: String
      },
      imgStyle: {
        type: Number
      },
      borderRadius: {
        type: Boolean
      },
      pagePadding: {
        type: Number
      },
      imgMargin: {
        type: Number
      }
    },
    components: {
      ImageItem,
      RadioSelection,
      Slider
    },
    computed: {
      imgSrc: {
        get () {
          return this.src
        },
        set (val) {
          this.$emit('update:src', val)
        }
      },
      iImgStyle: {
        get () {
          return this.imgStyle
        },
        set (val) {
          this.$emit('update:imgStyle', val)
        }
      },
      iPagePadding: {
        get () {
          return this.pagePadding
        },
        set (val) {
          this.$emit('update:pagePadding', val)
        }
      },
      iImgMargin: {
        get () {
          return this.imgMargin
        },
        set (val) {
          this.$emit('update:imgMargin', val)
        }
      },
      iBorderRadius: {
        get () {
          return this.borderRadius ? 2 : 1
        },
        set (val) {
          this.$emit('update:borderRadius', val !== 1)
        }
      },
      iTitle: {
        get () {
          return this.title
        },
        set (val) {
          this.$emit('update:title', val)
        }
      }
    },
    data () {
      const radiusOptions = [{ label: '方形', value: 1, icon: '' }, { label: '圆形', value: 2, icon: '' }]
      const styleOptions = [{ label: '常规', value: 1, icon: '' }, { label: '投影', value: 2, icon: '' }]
      return {
        radiusOptions,
        styleOptions
      }
    },
    methods: {
      init () {
      }
    },
    mounted () {
      this.init()
    }
  }
</script>

<style lang="less" scoped>
  .drag-image-props {
    padding: 5px;
    box-sizing: border-box;
  }
</style>
